<template>
  <div class="category">
    <category-bar />
    <div class="category-content">
      <category-menu :category="category" @itemClick="itemClick" />
      <scroll @scroll="listenerBackTop" ref="scroll" class="content" :probe-type="3" :pullUpLoad="true">
        <menu-detail :subCategory="subCategory" />
        <tab-control :titles="['综合','新品','销量']" @tabClick="tabClick" />
        <goods-list :goods="goods['pop'].list" :cols="2" />
      </scroll>
      <back-top @click.native="goTop" v-show="isShowBackTop" />
    </div>
  </div>
</template>

<script>
import {
  getCategory,
  getSubCategory,
  getContentDetail,
} from "network/category";
import { itemListenerMixin,backTopMixin } from "common/mixin";

import Scroll from "components/common/scroll/Scroll";
import TabControl from "components/content/tabcontrol/TabControl";
import GoodsList from "components/content/goodsList/GoodsList";
import BackTop from 'components/content/backTop/BackTop'

import CategoryBar from "./childComps/CategoryBar";
import CategoryMenu from "./childComps/CategoryMenu";
import MenuDetail from "./childComps/MenuDetail";

export default {
  name: "Category",
  data() {
    return {
      category: [],
      subCategory: [],
      goods: {
        pop: { page: 0, list: [] }, // 综合
        new: { page: 0, list: [] }, // 新品
        sell: { page: 0, list: [] }, // 销量
      },
      maitKey: "",
      miniWallkey: "",
      menuIndex: 0,
    };
  },
  components: {
    Scroll,
    TabControl,
    BackTop,
    GoodsList,
    CategoryBar,
    CategoryMenu,
    MenuDetail,
  },
  mixins: [itemListenerMixin,backTopMixin],
  activated(){
    this.$refs.scroll.refresh()
  },
  created() {
    this._getCategory(0);
  },
  methods: {
    /**
     * 网络请求相关的
     *
     */
    _getCategory(index) {
      getCategory().then((res) => {
        // 1.请求分类数据
        this.category = res.data.category.list;
        this.maitKey = res.data.category.list[index].maitKey;
        this.miniWallkey = res.data.category.list[index].miniWallkey;

        this._getSubCategory(this.maitKey);
        this._getContentDetail(this.miniWallkey, "pop");
        this._getContentDetail(this.miniWallkey, "new");
        this._getContentDetail(this.miniWallkey, "sell");
      });
    },

    _getSubCategory(maitKey) {
      // 2.默认请求右边的子分类的数据
      getSubCategory(maitKey).then((res) => {
        console.log(res);
        this.subCategory = res.data.list;
      });
    },

    _getContentDetail(miniWallkey, type) {
      // 请求综合，新品，销量的数据
      getContentDetail(miniWallkey, type).then((res) => {
        
        this.goods.pop.list = res;
        // console.log(this.goods)
      });
    },


    /**
     * 事件监听
     */

    itemClick(index) {
      this._getCategory(index)
      console.log(index);
    },

    tabClick(index) {
      const type = Object.keys(this.goods)[index]
      this._getContentDetail(this.miniWallkey,type)
    },

    // contentScroll(position){
      
    // }
  },
};
</script>

<style scoped>
.category {
  height: 100vh;
}
.category-content {
  display: flex;
  width: 100%;
  height: calc(100% - 44px - 49px);
  justify-content: flex-start;
}
.content {
  width: 75%;
  height: calc(100vh - 49px - 44px);
  overflow: hidden;
}
</style>